<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<script type="text/javascript" src="./lib/cuon-matrix.js"></script>
<script type="text/javascript" src="./lib/cuon-utils.js"></script>
<script type="text/javascript" src="./lib/webgl-debug.js"></script>
<script type="text/javascript" src="./lib/webgl-utils.js"></script>
<script type="text/javascript">
	var g_vertexBuffer;
	function initVertexBuffers(gl){
		g_vertexBuffer = gl.createBuffer();
		if(!g_vertexBuffer){
			alert('createBuffer g_vertexBuffer fail');
			return false;
		}
		return true
	}

	var Geometry1 = new Object();
	Geometry1.vertices = new Float32Array([
		-0.5, 0.5, 0.0,10.0,  0.0,1.0, 
		-0.5, -0.5,0.0, 20.0, 0.0,0.0,
		0.5, 0.5, 0.0,20.0, 1.0,1.0,
		0.5, -0.5,0.0,30.0, 1.0,0.0]);

	Geometry1.VSHADER_SOURCE =
	'attribute vec4 a_Position;'+
	'attribute float a_PointSize;'+
	'attribute vec2 a_TexCoord;'+
	'varying vec2 v_TexCoord;'+
	'uniform mat4 a_mat;'+
	'void main(){'+
	'gl_Position =  a_mat * a_Position;'+
	'gl_PointSize = a_PointSize;'+
	'v_TexCoord.y = 1.0 - a_TexCoord.y;'+
	'v_TexCoord.x = a_TexCoord.x;'+
	'}';

	Geometry1.FSHADER_SOURCE =
	'precision mediump float;'+
	'uniform sampler2D u_Sampler;'+
	'varying vec2 v_TexCoord;'+
	'void main(){'+
	'gl_FragColor = texture2D(u_Sampler,v_TexCoord) * vec4(1.0,215.0/255.0,0.0,1.0);'+
	'}';

    Geometry1.mat = new Matrix4();

    Geometry1.initShader = function(gl){
    	this.program = createProgram(gl,this.VSHADER_SOURCE,this.FSHADER_SOURCE);
		if(!this.program){
			alert('Geometry1 createProgram fail')
			return;
		}
		gl.useProgram(this.program);
    	this.a_mat = gl.getUniformLocation(this.program,'a_mat');	
		if (!this.a_mat) {
			alert('uniform Geometry1.a_mat fail');
			return false;
		}
    	this.a_Position = gl.getAttribLocation(this.program,'a_Position');
		if(this.a_Position <0){
			alert('a_PointSize fail')
			return false;
		}
		
		this.a_PointSize = gl.getAttribLocation(this.program,'a_PointSize');
		if(this.a_PointSize <0){
			alert('a_PointSize fail')
			return false;
		}

		this.a_TexCoord = gl.getAttribLocation(this.program,'a_TexCoord');
		if(this.a_TexCoord <0){
			alert('a_TexCoord fail');
			return false;
		}

		this.u_Sampler = gl.getUniformLocation(this.program,'u_Sampler');	
		if (!this.u_Sampler) {
			alert('uniform u_Sampler fail');
			return false;
		}
		return true;
    }

    Geometry1.initTexture = function(gl) {
		this.texture = gl.createTexture();
		if(!this.texture){
			alert('texture create fail');
			return false;
		}
		var image = new Image();
		if(!image){
			alert('image new fail');
			return false;
		}
		image.geometry = this
		image.onload = function(){
			//gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1);
			gl.activeTexture(gl.TEXTURE0);
			gl.bindTexture(gl.TEXTURE_2D,this.geometry.texture);

			gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);
			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

			gl.texImage2D(gl.TEXTURE_2D,0,gl.RGB,gl.RGB,gl.UNSIGNED_BYTE,image);
			
			this.geometry.textureReady =true;
		}
		image.src ='./textures/2.jpg';
		//
		//
		this.texture2 = gl.createTexture();
		if(!this.texture2){
			alert('texture2 create fail');
			return false;
		}
		var image2 = new Image();
		if(!image2){
			alert('image new fail');
			return false;
		}
		image2.geometry = this
		image2.onload = function(){
			//gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1);
			gl.activeTexture(gl.TEXTURE1);
			gl.bindTexture(gl.TEXTURE_2D,this.geometry.texture2);

			gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);
			//gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
            //gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

			gl.texImage2D(gl.TEXTURE_2D,0,gl.RGB,gl.RGB,gl.UNSIGNED_BYTE,image2);
			this.geometry.texture2Ready =true;
		}
		image2.src ='./textures/sky.jpg';
		return true;
	}

	Geometry1.draw = function(gl,frames){
		gl.useProgram(this.program);
		gl.bindBuffer(gl.ARRAY_BUFFER,g_vertexBuffer);
		gl.bufferData(gl.ARRAY_BUFFER,this.vertices,gl.STATIC_DRAW);

		gl.enableVertexAttribArray(this.a_Position);
		gl.enableVertexAttribArray(this.a_PointSize);
		gl.enableVertexAttribArray(this.a_TexCoord);


		
		var Fsize = this.vertices.BYTES_PER_ELEMENT;
		gl.vertexAttribPointer(this.a_Position,3,gl.FLOAT,false,Fsize*6,0);
		gl.vertexAttribPointer(this.a_PointSize,1,gl.FLOAT,false,Fsize*6,Fsize*3);
		gl.vertexAttribPointer(this.a_TexCoord,2,gl.FLOAT,false,Fsize*6,Fsize*4);

		this.mat.setTranslate(0,0,0);
		//this.mat.rotate((frames%360),1,0,0);

		gl.uniformMatrix4fv(this.a_mat,false,this.mat.elements);
		gl.uniform1i(this.u_Sampler,(frames/60)%2);
		//gl.drawArrays(gl.POINTS,0,4);
		gl.drawArrays(gl.TRIANGLE_STRIP,0,4);
		//gl.drawArrays(gl.TRIANGLE_FAN,0,4);
		//gl.drawArrays(gl.TRIANGLES,0,4);
		gl.bindBuffer(gl.ARRAY_BUFFER,null);
	}


	function start () {
		var canvas = document.getElementById("webgl");
		var gl = getWebGLContext(canvas);
		if (!gl){
			alert('gl fail');
			return;
		}

		if (!initVertexBuffers(gl)){
			alert('initVertexBuffers fail');
			return;
		}

		if(!Geometry1.initShader(gl)){
			alert('Geometry1 initShaderParm fail')
			return;
		}
		if (!Geometry1.initTexture(gl)) {
			alert('Geometry1 initTexture fail')
			return;	
		}

		var frames = 0
		function renderer(){
			frames++;
			if(Geometry1.textureReady && Geometry1.texture2Ready){
				render(gl,frames);
			}
			requestAnimationFrame(renderer)
		}
		renderer();
	}

	function render(gl,frames){
		gl.clearColor(0,0,0,1);
		gl.clear(gl.COLOR_BUFFER_BIT);
		Geometry1.draw(gl,frames);		
	}



</script>
<body onload="start()">
<canvas id="webgl" width="500" height="500"></canvas>
</body>
</html>